let imgs = document.querySelectorAll("img");
let boxs = document.querySelectorAll(".box");
let btn = document.querySelector(".btn");
let flag = true;

imgs.forEach((img, idx) => {
  let col = idx % 4;
  let row = Math.floor(idx / 4);
  let left = -200 * col;
  let top = -200 * row;
  img.style.left = left + "px";
  img.style.top = top + "px";
});

btn.addEventListener("click", () => {
  boxs.forEach((box, idx) => {
    let col = idx % 4;
    let row = Math.floor(idx / 4);

    if (flag) {
      if (row === 0) {
        if (col === 0) {
          box.style.transform = "translate(-60px, -60px)";
        } else if (col === 1) {
          box.style.transform = "translate(-30px, -60px)";
        } else if (col === 3) {
          box.style.transform = "translate(30px, -60px)";
        } else {
          box.style.transform = "translate(0px, -60px)";
        }
      } else if (row === 1) {
        if (col === 0) {
          box.style.transform = "translate(-60px, -30px)";
        } else if (col === 1) {
          box.style.transform = "translate(-30px, -30px)";
        } else if (col === 3) {
          box.style.transform = "translate(30px, -30px)";
        } else {
          box.style.transform = "translate(0px, -30px)";
        }
      } else if (row === 3) {
        if (col === 0) {
          box.style.transform = "translate(-60px, 30px)";
        } else if (col === 1) {
          box.style.transform = "translate(-30px, 30px)";
        } else if (col === 3) {
          box.style.transform = "translate(30px, 30px)";
        } else {
          box.style.transform = "translate(0px, 30px)";
        }
      } else {
        if (col === 0) {
          box.style.transform = "translate(-60px, 0px)";
        } else if (col === 1) {
          box.style.transform = "translate(-30px, 0px)";
        } else if (col === 3) {
          box.style.transform = "translate(30px, 0px)";
        } else {
          box.style.transform = "translate(0px, 0px)";
        }
      }
      box.style.transform += " rotate(360deg)";
    } else {
      box.style.transform = "translate(0px, 0px)";
    }
    // box.classList.add("animate");
    box.addEventListener(
      "animationend",
      function () {
        box.classList.remove("animate");
      },
      { once: true }
    );
  });
  flag = !flag;
});
